<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="q.gatewayId" class="filter-item" placeholder="请选择网关" clearable>
        <el-option label="全部" value="">
        </el-option>
        <el-option v-for="item in gateways" :key="item.id" :label="item.company" :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="q.conditionName" class="filter-item" placeholder="请选择分类" clearable>
        <el-option v-for="item in alarmCategoryOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <div class="filter-item">
        <el-input v-model="q.source" placeholder="位号" />
      </div>
      <div class="filter-item">
        <el-input v-model="q.itemCode" placeholder="指标编码" />
      </div>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      <div class="filter-item pull-right">
        <span class="label-text">自动刷新</span>
        <el-switch v-model="autoRefresh"></el-switch>
      </div>
    </div>
    <el-table :key="tableKey" v-loading="tableLoading" :data="dataAlarms" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="网关ID" prop="gatewayId" min-width="190"></el-table-column>
      <el-table-column label="位号" prop="source" min-width="90"></el-table-column>
      <el-table-column label="指标编码" prop="itemCode" min-width="90"></el-table-column>
      <el-table-column label="事件类型" prop="category" align="center" min-width="90px"></el-table-column>
      <el-table-column label="级别" prop="severity" align="center" min-width="90px"></el-table-column>
      <el-table-column label="状态" align="center" min-width="90px">
        <template slot-scope="{row}">
          {{ transState(row.conditionState) }}
        </template>
      </el-table-column>
      <el-table-column label="报警类型" prop="conditionName" align="center" min-width="90"></el-table-column>
      <el-table-column label="数据源名称" prop="equipmentName" align="center" min-width="90"></el-table-column>
      <el-table-column label="当前值" prop="currentValue" align="center" min-width="90"></el-table-column>
      <el-table-column label="阈值" prop="threshold" align="center" min-width="90"></el-table-column>
      <el-table-column label="告警信息" prop="message" align="center" min-width="90"></el-table-column>
      <el-table-column label="触发时间" align="center" min-width="90">
        <template slot-scope="scope">
          <span>{{ transDate(scope.row.activeTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="showMore(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="totalCount > 0" :total="totalCount" :page-index.sync="q.page" :page-size.sync="q.size" @pagination="getLivePageAlarm" />
    <alarm-detail-drawer ref="alarmDetailDrawer"></alarm-detail-drawer>
  </div>
</template>

<script>
import { getLivePageAlarm } from "@/api/alarm";
import { getGatewayShort } from "@/api/gateway";
import { alarmCategoryOptions } from "@/utils/enums.js";
import Pagination from "@/components/Pagination";
import AlarmDetailDrawer from "./components/AlarmDetailDrawer";
import moment from "moment";

export default {
  components: {
    pagination: Pagination,
    AlarmDetailDrawer
  },
  data() {
    return {
      alarmCategoryOptions,
      isSubmitLoading: false,
      tableLoading: false,
      tableKey: 0,
      gateways: undefined,
      dataAlarms: [],
      q: {
        conditionName: undefined,
        gatewayId: undefined,
        source: undefined,
        itemCode: undefined,
        page: 1,
        size: 10
      },
      autoRefresh: true,
      totalCount: 0,
      timer: undefined
    };
  },
  computed: {},
  watch: {
    autoRefresh: function(newVal) {
      if (newVal) {
        this.setInterval();
      } else {
        clearInterval(this.timer);
      }
    }
  },
  destroyed() {
    clearInterval(this.timer);
  },
  created() {
    this.getGatewayShort();
    this.getLivePageAlarm();
    this.setInterval();
  },
  methods: {
    setInterval() {
      this.timer = setInterval(() => {
        this.getLivePageAlarm();
      }, 5000);
    },
    handleSearch() {
      this.getLivePageAlarm();
    },
    getGatewayShort() {
      getGatewayShort().then(result => {
        console.log(result);
        this.gateways = result;
      });
    },
    getLivePageAlarm() {
      this.tableLoading = true;
      // 查询告警信息
      getLivePageAlarm(this.q).then(result => {
        this.dataAlarms = result.content;
        this.totalCount = result.totalElements;
        this.tableLoading = false;
      });
    },
    transDate(timestamp) {
      return moment(timestamp * 1000).format("YYYY-MM-DD HH:mm:ss");
    },
    transState(conditionState) {
      let returnVal = "";
      switch (conditionState) {
        case 0:
          returnVal = "报警";
          break;
        case 1:
          returnVal = "消警";
          break;
      }
      return returnVal;
    },
    showMore(item) {
      this.$refs["alarmDetailDrawer"].show(item);
    }
  }
};
</script>

<style lang="scss">
.full-container {
  min-height: calc(100vh - 50px);
}
</style>
